<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix DrawerWithGrip</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/DrawerWithGrip.js"></script>

    <style>
      html {
        height: 100%;
      }

      body {
        height: 100%;
        padding: 0;
      }
    </style>
  </head>

  <body role="main">
    <div class="demo fullScreen" style="overflow: hidden;">
      <style>
        /* This styling only necessary for in situ demos in Elix docs. */
        #drawerWithGrip {
          position: absolute;
          max-height: 100%;
          max-width: 100%;
        }

        #drawerWithGrip > * {
          margin: 1em;
        }
        #drawerWithGrip > :first-child {
          margin-top: 0;
        }
        #drawerWithGrip > :last-child {
          margin-bottom: 0;
        }
      </style>

      <p style="margin: 2em;">
        <button onclick="drawerWithGrip.open()">Open drawer</button>
      </p>

      <elix-drawer-with-grip
        id="drawerWithGrip"
        from-edge="bottom"
        aria-label="Drawer with sample content"
      >
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie
          molestie enim porta dapibus. Phasellus dolor quam, egestas eu viverra
          at, porttitor in diam. Donec risus tellus, accumsan eget ipsum sed,
          vestibulum blandit ante. Nullam rhoncus leo nec lobortis convallis.
          Donec posuere tellus a nibh dignissim, rhoncus viverra neque rutrum.
          Suspendisse rutrum at massa vitae venenatis. Suspendisse ut risus
          pellentesque lacus dictum aliquet. Cras a arcu id odio molestie
          imperdiet.
        </p>
        <p>
          Pellentesque vitae eros ac nulla aliquam eleifend. Nunc ornare
          sollicitudin arcu id suscipit. Donec sed nisl libero. Nulla facilisi.
          Proin ornare feugiat molestie. Mauris velit mi, volutpat sit amet
          posuere quis, tristique et urna. Donec sit amet tellus magna. Aenean
          feugiat suscipit neque, ut porttitor diam auctor in. Sed faucibus
          finibus ipsum et pharetra. In hac habitasse platea dictumst. Cras
          facilisis justo eu lectus luctus, et interdum velit aliquet.
        </p>
        <p>
          Aliquam vitae nulla efficitur turpis viverra placerat. Mauris
          fermentum tellus vel elementum aliquet. Integer vitae arcu et mi
          tristique lacinia. Cras placerat ultrices velit, id interdum ipsum
          commodo efficitur. Maecenas maximus odio a nisi dapibus, non dapibus
          nisl venenatis. Morbi tristique interdum leo, non tincidunt sapien
          efficitur ac. Nunc hendrerit turpis eget enim rhoncus sagittis. Aenean
          ac euismod magna. Phasellus et posuere nisi.
        </p>
        <p>
          Ut volutpat eget massa id viverra. Maecenas accumsan euismod lorem, ac
          tristique urna efficitur non. Cras ornare ultricies arcu eu dignissim.
          Curabitur varius ante eget arcu accumsan, ut lacinia lacus dignissim.
          Ut pellentesque nibh efficitur venenatis gravida. Phasellus varius
          lacus non ultricies imperdiet. Class aptent taciti sociosqu ad litora
          torquent per conubia nostra, per inceptos himenaeos.
        </p>
        <p>
          Efficitur nisl vel metus vestibulum, quis rutrum sapien rutrum.
          Suspendisse non mi varius, tincidunt mauris non, dignissim odio. Proin
          aliquam eleifend vestibulum. Mauris porttitor neque vel ullamcorper
          suscipit. Class aptent taciti sociosqu ad litora torquent per conubia
          nostra, per inceptos himenaeos. Vivamus accumsan luctus commodo. Class
          aptent taciti sociosqu ad litora torquent per conubia nostra, per
          inceptos himenaeos. Pellentesque quis enim vel tortor molestie rhoncus
          ac eu eros.
        </p>
        <p>
          Praesent semper turpis vel tortor lacinia accumsan. Cras facilisis
          varius leo, a pretium odio ultrices eget. Nunc felis leo, aliquam sit
          amet lobortis rutrum, lobortis porttitor dolor. Sed nisl lacus,
          placerat ac enim id, rhoncus molestie turpis. Aenean nibh justo,
          ultrices quis mollis id, semper a risus. Cras magna ipsum,
          sollicitudin ut pretium sed, ultricies at ante. Integer ultricies quis
          elit in efficitur. Nam ac felis sollicitudin, tincidunt lorem sit
          amet, convallis ligula.
        </p>
      </elix-drawer-with-grip>
    </div>
  </body>
</html>
